<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <base href="">
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>
        body {
            counter-reset: OuterItemCount -1 InnerItemCount;
        }

        #outerlist>li::before {
            content: counter(OuterItemCount) ".";
            counter-increment: OuterItemCount 2;
        }

        ul.innerlist>li::before {
            content: counter(InnerItemCount, lower-alpha) ".";
            counter-increment: InnerItemCount;
        }
    </style>
</head>

<body>
    I like apples and oranges.

    I also like:

    <ul id="outerlist" style="list-style-type: none">
        <li>bananas</li>
        <li>mangoes, including:</li>
        <ul class="innerlist">
            <li>Haden mangoes</li>
            <li>Keitt mangoes</li>
            <li>kent mangoes</li>
        </ul>
        <li>cherries</li>
        <li>plums, including:</li>
        <ul>
            <li>Elephant Heart plums</li>
            <li>Stanley plums</li>
            <li>Seneca plums</li>
        </ul>
        <li>peaches</li>
        <li>grapes</li>
    </ul>
    You can see other fruits I like <a href="./HTML_基本结构.html">here</a>.
</body>

</html>